<template>
  <checker v-model="bindValue" :radio-required="required || true">
    <checker-item v-for="(item, index) in items" :key="index"
      :value="{}.constructor.values(item)[0]" class="check-item"
    >
      <div class="check-icon" :class="{ selected: bindValue === {}.constructor.values(item)[0] }"></div>
      <span>{{ {}.constructor.keys(item)[0] }}</span>
    </checker-item>
  </checker>
</template>

<script>
import { Checker, CheckerItem } from 'vux'

export default {
  components: {
    Checker,
    CheckerItem
  },

  props: ['value', 'required', 'items'],

  data (){
    return {
      bindValue: this.value
    }
  },

  watch: {
    bindValue (val){
      this.$emit('input', val)
    }
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.check-item{
  margin-left: 5px;
}

.check-icon{
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px @subtext solid;
  box-sizing: border-box;
  margin: 0 5px;
  vertical-align: -2px;

  &.selected{
    background-image: url('~@img/btn/release_btn_selection@2x.png');
    background-repeat: no-repeat;
    background-size: 100%;
    border: none;  
  }
}
</style>